<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模版语法之插值语法{{}}</title>
    <!--安装Vue-->
    <script src="js/vue.js"></script>
</head>
<body>

<!--
  主要研究:{{这里可以写什么}}
  1.在data中声明的变量,函数等都可以
  2.常量都可以
  3.只要是合法的javascript表达式,都可以
  4.模版表达式都被放在沙盒中,只能访问全局变量的一个白名单,如Math和Data
   'Infinity,undefined,NaN,isFinite,isNaN,'
            'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,'
            'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,'
            'require'

-->
<!--准备容器-->
<div id="app">
    <!--在data中声明的-->
    <!--这里就可以看做是在使用msg变量-->
    <h1>{{msg}}</h1>
    <h1>{{sayHello()}}</h1>

<!--    <h1>{{// i}}</h1>-->
<!--    <h1>{{sum()}}</h1>-->

    <!--常量-->
    <h1>{{100}}</h1>
    <h1>{{'hello vue!'}}</h1>
    <h1>{{3.14}}</h1>

    <!--javascript表达式-->
    <h1>{{1 + 1}}</h1>
    <h1>{{'hello' + 'vue'}}</h1>
    <h1>{{msg + 1}}</h1>
    <h1>{{'msg' + 1}}</h1>
    <h1>{{gender ? '男' : '女'}}</h1>
    <h1>{{number + 1}}</h1>
    <h1>{{'number' + 1}}</h1>
    <h1>{{msg.split('').reverse().join('')}}</h1>

    <!--不是表达式 这是语句-->
<!--    <h1>{{var i = 100}}</h1>-->

    <!--在白名单里面的-->
    <h1>{{Date}}</h1>
    <h1>{{Date.now()}}</h1>
    <h1>{{Math}}</h1>
    <h1>{{Math.ceil(3.14)}}</h1>

</div>

<script>
    //用户自定义一个全局变量
    var i = 100
    //用户自定义一个全局函数
    function sum(){
        console.log('sum....')
    }

    new Vue({
        el : '#app',
        data : {
            number : 1,
            gender : true,
            msg : 'abcdef',//为了方便沟通,以后我们把msg叫做变量
            sayHello : function (){
                console.log('Hello vue')
            }
        }
    })


</script>

</body>
</html>